<!--
 * @Date: 2023-09-18 19:01:24
 * @LastEditTime: 2023-10-12 16:29:11
 * 介绍:
-->
<script lang="ts" setup>
import { ApiBanTaskDelList } from "@@/api/wk/list";
import { useCurrentDate } from "@@/hooks/toolsHooks";
import { getCountdown } from "@@/utils/tools/date";
import dayjs from "dayjs";
import { divide, multiply, add } from "mathjs";
import { apiDelTaskVote } from "@@/api/wk/index";
import { fixedDecimals } from "@@/utils/tools/format";

const { currentDate } = useCurrentDate();

const props = defineProps<{
  banTaskDel: Omit<ApiBanTaskDelList.DataItem, "task">;
}>();

const countdown = computed(() => {
  const res = getCountdown(
    currentDate.value,
    dayjs(props.banTaskDel.created_at).add(
      Number(props.banTaskDel.end_time_hour),
      "h"
    )
  );
  if (res.diffTime <= 0) return false;
  return `${res.H}:${res.m}:${res.s}`;
});
function getRatio(ok: number, no: number) {
  const res = multiply(divide(ok, add(ok, no)), 100);
  return Number.isNaN(res) ? 0 : res;
}

const btnLoading = reactive({
  delTaskVote: false,
});

enum Vote {
  OK = 1,
  NO = 2,
}

/** 给删除任务投票
 * @param type 1同意，2不同意
 */
async function delTaskVote(type: Vote) {
  btnLoading.delTaskVote = true;
  const res = await apiDelTaskVote({ id: props.banTaskDel.id }, { type });
  btnLoading.delTaskVote = false;
  if (!res) return;
  props.banTaskDel.can_vote = 0;
  if (type === Vote.OK) props.banTaskDel.agree_num++;
  if (type === Vote.NO) props.banTaskDel.disagree_num++;
}
</script>
<template>
  <div class="auto-MT-md">
    <Ccard>
      <h3>{{ $t("shan-chu-shuo-ming") }}</h3>
      <div class="MT-sm C-T3">{{ props.banTaskDel.explain }}</div>
      <CimagesPreview class="MT-md" :images="banTaskDel.images" />
    </Ccard>
    <Ccard class="auto-MT-sm">
      <h3>{{ $t("zhi-chi-shuai") }}</h3>
      <div class="flex-J-SB T-S-sm">
        <div>
          <span>{{ $t("tou-piao-ren-shu") }}</span>
          {{
            add(
              Number(props.banTaskDel.agree_num),
              Number(props.banTaskDel.disagree_num)
            )
          }}
        </div>
      </div>
      <div class="flex-A-C B-M1-O2 C-M1 PD-xs PL-sm PR-sm MT-sm R-xs">
        <Cicon name="icon-shijian" />
        <div class="ML-xs">{{ $t("daoJiShi") }}</div>
        <div class="ML-auto">
          {{ countdown || $t("yi-jie-shu") }}
        </div>
      </div>
      <div class="PD-md">
        <Rslider
          :model-vlaue="
            getRatio(props.banTaskDel.agree_num, props.banTaskDel.disagree_num)
          "
          readonly
          :min="0"
          :max="100"
          :step="0.01"
          active-color="var(--C-success)"
          inactive-color="var(--C-fail)"
        >
          <template #button="{ value }">
            <CstateTag class="T-nowrap C-white">
              {{ fixedDecimals(value, 0) }}%
            </CstateTag>
          </template>
        </Rslider>
      </div>
    </Ccard>
    <div class="T-A-C" v-if="!countdown || props.banTaskDel.status != 0">
      {{ $t("tou-piao-yi-jie-shu") }}
    </div>
    <div class="T-A-C" v-else-if="props.banTaskDel.can_vote != 1">
      {{ $t("nin-wu-xu-tou-piao") }}
    </div>
    <div v-else class="btnBox flex-J-SE" style="gap: var(--gap-md)">
      <Rbutton
        @click="delTaskVote(Vote.NO)"
        :loading="btnLoading.delTaskVote"
        :size="'large'"
        bg="var(--C-M1-O3)"
      >
        {{ $t("fan-dui") }}
      </Rbutton>
      <Rbutton
        @click="delTaskVote(Vote.OK)"
        :loading="btnLoading.delTaskVote"
        :size="'large'"
        bg="var(--C-LG1)" borderStyle="none"
      >
        {{ $t("zhi-chi") }}
      </Rbutton>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
